<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实例</title>
	<style type="text/css">
		/* 第一部分 */
		#part1 .menu-outer{
			position: relative;
			display: inline-block;
			margin: 30px;
			width: 20px;
			height: 24px;
			cursor: pointer;
		}
		#part1 .menu-outer:hover .menu{
			background-color: transparent;
		}

		#part1 .menu-outer:hover .menu::before{
			transform: translateY(8px) rotate(45deg);
		}
		#part1 .menu-outer:hover .menu::after{
			transform: translateY(-8px) rotate(-45deg);
		}
		#part1 .menu{
			position: absolute;
			top: 50%;
			left: 50%;
			width: 20px;
			height: 2px;
			padding: 8px 0;
			transform:translate(-50%, -50%);
			background-clip: content-box;
			background-color: #585247;
		}

		#part1 .menu::after, .menu::before{
			position: absolute;
			left: 0;
			display: inline-block;
			content: '';
			width: 100%;
			height: 2px;
			background-color: #585247;
			transition: transform 0.3s, background-color 0.3s;
		}

		#part1 .menu::before{
			top: 0;
		}

		#part1 .menu::after{
			bottom: 0;
		}
		/* 第二部分 */
		#part2 .mouse-in{
			position: relative;
			overflow: hidden;
			width: 160px;
			height: 160px;
			margin: 60px;
			border-radius: 10%;
			/* -webkit-perspective: 500px; */
			transform-origin: 0 0;
			transition: background-color 0.3s;
		}

		#part2 .mouse-in img{
			position: absolute;
			top: 0;
			z-index: -1;
			width: 100%;
			height: 100%;
			transition: opacity 0.3s;
		}

		#part2 .mouse-in h2,
		#part2 .mouse-in p {
		    position: absolute;
		    padding: 0 16px;
		    color: #fff;
		    opacity: 0;
		    transform: translate3d(-160px, 0, -160px);
		}

		#part2 .mouse-in h2 {
		    bottom: 50%;
		    text-transform: uppercase;
		    font-weight: 600;
		    font-size: 20px;
		    transition: transform 0.3s cubic-bezier(0, 2.3, 0.8, 1), opacity 0.3s;
		}

		#part2 .mouse-in p {
		    top: 50%;
		    font-size: 14px;
		    transition: transform 0.3s 0.1s cubic-bezier(0, 2.3, 0.8, 1), opacity 0.3s 0.1s;
		}

		#part2 .mouse-in:hover {
		    background: #000;
		}

		#part2 .mouse-in:hover h2,
		#part2 .mouse-in:hover p {
		    opacity: 1;
		    transform: translate3d(0, 0, 0);
		}
		/* 第三部分 */
		#part3 .l-bg{
			background-color: #393d49;
		}
		#part3 .l-list{
			display: flex;
		}
		#part3 .l-list-item{
			width: 80px;
			padding: 0 8px;
    		list-style: none;
			text-align: center;
		}
		#part3 .l-list-item a{
			color: #fff;
			padding: 16px;
			display: block;
			position: relative;
			background-color: transparent;
			text-decoration: none;
		}
		#part3 .l-list-item a::after{
			position: absolute;
			bottom: 0;
			left: 0;
			height: 4px;
			width: 100%;
			content: '';
			transform: scaleX(0);
			background-color: #5fb878;
			transition: ease 0.3s;
		}
		#part3 .l-list-item:hover a::after{
			transform: scaleX(1);
		}
		/* 第四部分 */
		#part4 .l-list {
		    position: absolute;
		    top: 100%;
		    z-index: -1;
		    width: 100%;
		    padding: 4px 0;
		    background-color: #fff;
		    border: 1px solid #cecece;
		    box-sizing: border-box;
		    opacity: 0;
		}

		#part4 .l-list-item {
		    list-style: none;
		    padding: 4px 8px;
		}

		#part4 .l-list-item a {
		    display: block;
		    padding: 4px 0;
		    font-size: 16px;
		    color: #000;
		    text-align: center;
		    text-decoration: none;
		    transition: all 0.2s linear;
		}

		#part4 .l-list-item a:hover {
		    color: #fff;
		    background-color: #cecece;
		}

		#part4 .l-drop-menu {
		    position: relative;
		    width: 142px;
		    height: auto;
		    margin: 0 auto;
		}

		#part4 .l-drop-menu>span {
		    position: relative;
		    display: block;
		    padding: 8px 20px;
		    text-align: center;
		    color: #58a;
		    background-color: #fff;
		    cursor: pointer;
		}

		#part4 .l-drop-menu>span::after {
		    position: absolute;
		    top: 8px;
		    right: 16px;
		    content: '';
		    width: 0;
		    height: 0;
		    overflow: hidden;
		    border-width: 8px;
		    border-style: dashed dashed solid;
		    border-color: transparent transparent #c2c2c2;
		    transition: all 0.3s linear;
		}

		#part4 .l-drop-menu>span:hover {
		    color: #fff;
		    background-color: #cecece;
		}

		#part4 .l-drop-menu>span:hover::after {
		    top: 16px;
		    border-style: solid dashed dashed;
		    border-color: #ffffff transparent transparent;
		}
		#part4 .l-menu-1 .l-list {
		    transform: translate3d(0, 10px, 0);
		    backface-visibility: hidden;
		    transition: all 0.3s linear;
		}

		#part4 .l-menu-1:hover .l-list {
		    z-index: 2;
		    overflow: auto;
		    opacity: 1;
		    transform: translate3d(0, 0, 0);
		}

		/* 第五部分 */
		#part5 .l-border{
		    display: inline-block;
		    padding: 16px 32px;
		    border: 1px solid #ebebeb;
		    -webkit-transition: all 0.6s ease-in;
		    transition: all 0.6s ease-in;
		}

		#part5 .l-border:hover{
		    border: 1px solid #367dff;
		}
		#part5 .border-line {
		    position: relative;
		    display: inline-block;
		    height: 100%;
		    background: none;
		    box-sizing: border-box;
		    box-shadow: inset 0 0 0 0px transparent;
		}

		#part5 .border-line::after,
		#part5 .border-line::before {
		    position: absolute;
		    content: '';
		    display: block;
		    width: 0;
		    height: 0;
		    box-sizing: border-box;
		    border: 2px solid transparent;
		}

		#part5 .border-line::after {
		    top: 0;
		    left: 0;
		    -webkit-transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s;
		    transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s;
		}

		#part5 .border-line::before {
		    bottom: 0;
		    right: 0;
		    -webkit-transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in;
		    transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in;
		}

		#part5 .border-line:hover::after,
		#part5 .border-line:hover::before {
		    width: 100%;
		    height: 100%;
		}

		#part5 .border-line:hover::after {
		    border-top-color: #367dff;
		    border-right-color: #367dff;
		    -webkit-transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
		    transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
		}

		#part5 .border-line:hover::before {
		    border-bottom-color: #367dff;
		    border-left-color: #367dff;
		    -webkit-transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
		    transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
		}
	</style>
</head>
<body>
	<div id="part1">
		<div class="menu-outer">
			<div class="menu"></div>
		</div>
	</div>
	<div id="part2">
		<div class="mouse-in">
		    <a href="javascript:;">
		        <img src="../images/1.png" alt="logo">
		        <h2 class="l-logo">logo</h2>
		        <p>源自世界的logo</p>
		    </a>
		</div>
	</div>
	<div id="part3">
		<div class="l-nav l-bg">
			<ul class="l-list">
				<li class="l-list-item"><a href="javascript:void(0);">主页</a></li>
				<li class="l-list-item"><a href="javascript:void(0);">导航1</a></li>
				<li class="l-list-item"><a href="javascript:void(0);">导航2</a></li>
			</ul>
		</div>
	</div>
	<div id="part4">
		<div class="l-drop-menu l-menu-1">
	        <span>下拉菜单</span>
	        <ul class="l-list">
	            <li class="l-list-item"><a href="http://www.baidu.com">百度一下</a></li>
	            <li class="l-list-item"><a href="http://www.bing.com">bing搜索</a></li>
	            <li class="l-list-item"><a href="http://www.iconfont.cn/">iconfont</a></li>
	        </ul>
	    </div>
	</div>

	<div id="part5">
		<div class="border-line">
			<div class="l-border">通用输入</div>
		</div>
	</div>
</body>
</html>